<template>
    <van-nav-bar
        title="标题"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
        <template #right>
        <van-icon name="search" size="18"/>
        </template>
    </van-nav-bar>
    
    <div id = "content">
        <template v-if="active === 'index'">
            <Index />
        </template>
        <template v-if="active === 'team'">
            <Team />
        </template>
    </div>
    
    <van-tabbar route v-model="active" @change="onChange">
        <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
        <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
        <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
    </van-tabbar>

</template>

<script setup>
// <script setup>是在vue3.2之后新增的语法糖，简化了API的写法

// 1.声明的变量无需return，可以直接在模板中使用，实现了顶层的绑定

// 2.引入组件会自动注册，无需再使用components
    import { ref } from 'vue';
    import Index from "../pages/Index.vue"
    import Team from "../pages/TeamPage.vue"
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('按钮');
    const active = ref("index");
    const onChange = (index) => showToast(`标签 ${index}`);
</script>

<style scoped>

</style>